<template>
  <div>
    <van-nav-bar
        class="change-nav-bg"
        :title="$t('changePassword.t1')"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
<!--        <van-field-->
<!--            v-model="userName"-->
<!--            name="userName"-->
<!--            label="用户名"-->
<!--            disabled-->
<!--            placeholder="用户名"-->
<!--            :rules="[{ required: true, message: '请填写用户名' }]"-->
<!--        />-->
        <van-field
            v-model="password1"
            type="password"
            name="password1"
            :label="$t('changePassword.t6')"
            :placeholder="$t('changePassword.t6')"
            :rules="[{ required: true, message: $t('changePassword.t3') }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            :label="$t('changePassword.t2')"
            :placeholder="$t('changePassword.t2')"
            :rules="[{ required: true, message: $t('changePassword.t3') }]"
        />
        <van-field
            v-model="password2"
            type="password"
            name="password2"
            :label="$t('changePassword.t4')"
            :placeholder="$t('changePassword.t4')"
            :rules="[{ validator, message: $t('changePassword.t7') }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block class="change-btn" native-type="submit">
          {{ $t('changePassword.t5') }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field, CellGroup, Button, NavBar } from 'vant';
import {updateUserPasswd} from "../../api/user";
import {getSessionItem} from "../../utils/storage";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup
  },

  data () {
    return {
      userName: '',
      password: '',
      password1: '',
      password2: '',
    }
  },

  created() {
    let userInfoStr = JSON.parse(getSessionItem('userInfo'));
    this.userName = userInfoStr.code;
  },

  methods: {
    validator(val) {
      return val === this.password;
    },

    onSubmit () {
      let self = this
      const params = {
        UserPasswd1: this.password1,
        userPasswd: this.password,
        userName: this.userName
      }
      updateUserPasswd(self, params).then(response => {
        console.log(response.data)
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    onClickLeft () {
      history.back();
    }
  }
};

</script>

<style lang="less">
.change {
  &-nav-bg {
    margin-bottom: 15px;
    //background: #4293F4;
    box-shadow: 0 0 25px #cac6c6;
  }

  &-btn {
    color: #fff;
    background-color: #4293F4;
    border: 1px solid #4293F4;
  }
}
</style>
